<template>
	<view :data-theme='theme()' :class="theme() || ''">
		<!--切换-->
		<view class="top-tabbar">
			<view :class="state_active == item.value? 'tab-item active' : 'tab-item'" @click="stateFunc(item.value)"
				v-for="(item,index) in tableList" :key="index">{{item.text}}</view>
		</view>

		<!--列表-->
		<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"
			@scrolltoupper="scrolltoupperFunc" @scrolltolower="scrolltolowerFunc">
			<view class="p-0-30 mt20">
				<view class="d-b-s d-c lists mb20  p20" v-for="(item,index) in tableData" :key="index">
					<view class="d-b-c  d-r ww100">
						<text class="f28 mb16">佣金提现到银行卡</text>
						<view class="tr" :class="item.applyStatusText=='审核通过'?'green':'gray9'">
							{{ item.applyStatusText }}
						</view>
					</view>
					<view class="border-b" style="padding-bottom: 20rpx;">
						<view class="mb10"><text class="gray9 f22 ">提现时间:{{item.createTime}}</text></view>
						<view class="gray9 f22 mb10">提现金额:<text class="gray3 f24">{{item.money}}元</text> </view>
						<view class="gray9 f22">提现手续费:<text
								class="gray3 f24">{{(item.money - item.realMoney).toFixed(2)}}元</text> </view>
					</view>
					<view class=" d-b-c d-r mt20 ww100">
						<view></view>
						<view>
							<!-- #ifdef  MP-WEIXIN -->
							<view class="cash-btn" v-if="item.applyStatus === 50">
								<button type="default" @click="receiptWx(item)">
									确认收款
								</button>
							</view>
							<!-- #endif -->
							<!-- #ifdef  H5 -->
							<view class="cash-btn" v-if="isWeixin() && item.applyStatus === 50">
								<button type="default" @click="receiptMp(item)">
									确认收款
								</button>
							</view>
							<!-- #endif -->
						</view>

					</view>
				</view>
				<!-- 没有记录 -->
				<view class="d-c-c p30" v-if="tableData.length==0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无相关记录哦</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue";
	//#ifdef H5
	import jweixin from "weixin-js-sdk";
	//#endif
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {

				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*状态选中*/
				state_active: -1,
				/*数据列表*/
				tableData: [],
				no_more: false,
				loading: true,
				/*最后一页码数*/
				last_page: 0,
				/*当前页面*/
				page: 1,
				/*每页条数*/
				list_rows: 20,
				tableList: [],
				urldata: "",
			}
		},
		computed: {

			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.tableData.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		mounted() {
			//#ifdef H5
			if (this.isWeixin()) {
				this.urldata = window.location.href;
			}
			//#endif
			/*初始化*/
			this.init();
			/*获取数据*/
			this.getData();
		},
		methods: {
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().select('.top-tabbar');
						view.boundingClientRect(data => {
							let h = self.phoneHeight - data.height;
							self.scrollviewHigh = h;
						}).exec();
					}
				});
			},
			/*获取数据*/
			getData() {
				let self = this;
				self.loading = true;
				let params = {};
				params.pageIndex = self.page || 1;
				params.pageSize = self.list_rows;
				params.status = self.state_active;
				self._postBody('plus/agent/cash/lists', params, function(res) {
					self.loading = false;
					// 导航栏数据
					self.tableList = [{
							value: -1,
							text: res.data.words.cashList.all,
						}, {
							value: 10,
							text: res.data.words.cashList.apply10,
						}, {
							value: 20,
							text: res.data.words.cashList.apply20
						},
						{
							value: 40,
							text: res.data.words.cashList.apply40,
						},
						{
							value: 30,
							text: res.data.words.cashList.apply30,
						}
					];
					self.tableData = self.tableData.concat(res.data.list.records);
					self.last_page = res.data.list.lastPage;
					if (res.data.list.lastPage <= 1) {
						self.no_more = true;
						return false;
					}
				});
			},

			/*切换*/
			stateFunc(e) {
				let self = this;
				if (e != self.state_active) {
					self.tableData = [];
					self.page = 1;
					self.state_active = e;
					self.getData();
				}
			},

			/*可滚动视图区域到顶触发*/
			scrolltoupperFunc() {
				console.log('滚动视图区域到顶');
			},

			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				if (self.page < self.last_page) {
					self.page++;
					self.getData();
				}
				self.no_more = true;
			},
			/*用户确认已收款*/
			receiptWx(item) {
				let self = this;

				let id = item.id;
				let mchId = item.mchId;
				let appId = item.wxAppId;
				let packageInfo = item.packageInfo;
				if (wx.canIUse('requestMerchantTransfer')) {
					wx.requestMerchantTransfer({
						mchId: mchId,
						appId: appId,
						package: packageInfo,
						success: (res) => {
							// res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
							console.log('success:', res);
							self._post(
								"plus/agent/cash/receipt", {
									id: id,
								},
								function(data) {

									self.tableData = [];
									self.getData();
								}
							);

						},
						fail: (res) => {
							console.log('fail:', res);
						},
					});
				} else {
					wx.showModal({
						content: '你的微信版本过低，请更新至最新版本。',
						showCancel: false,
					});
				}
			},
			/*用户确认已收款*/
			receiptMp(item) {
				let self = this;

				let id = item.id;
				let mchId = item.mchId;
				let appId = item.wxAppId;
				let packageInfo = item.packageInfo;

				// #ifdef H5
				self.getWxSignPackage(appId, function(signPackage) {
					jweixin.config({
						debug: false,
						appId: signPackage.appId,
						timestamp: signPackage.timestamp,
						nonceStr: signPackage.nonceStr,
						signature: signPackage.signature,
						jsApiList: ['requestMerchantTransfer']
					});

					jweixin.ready(function() {
						jweixin.checkJsApi({
							jsApiList: ['requestMerchantTransfer'],
							success: function(res) {
								if (res.checkResult['requestMerchantTransfer']) {
									WeixinJSBridge.invoke('requestMerchantTransfer', {
											mchId: mchId,
											appId: appId,
											package: packageInfo,
										},
										function(res) {
											if (res.err_msg ===
												'requestMerchantTransfer:ok') {
												self._post(
													"plus/agent/cash/receipt", {
														id: id,
													},
													function(data) {

														self.tableData = [];
														self.getData();
													}
												);
											}
										});
								} else {
									alert('你的微信版本过低，请更新至最新版本。');
								}
							}
						});
					});

					jweixin.error(function(res) {
						console.log(res);
					});
				});
				// #endif
			},
			getWxSignPackage(appId, callback) {
				this._postBody("index/getSignPackage", {
					url: this.urldata,
					paySource: this.getPlatform(),
				}, function(res) {
					callback(res.data.signPackage);
				});
			},

		}
	}
</script>

<style lang="scss">
	.lists {

		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.tab-item {
		font-size: 28rpx;
	}

	.tab-item.active {
		font-weight: normal;
		font-size: 28rpx;
	}

	.tab-item.active::after {
		width: 57rpx;
		height: 6rpx;
		background: linear-gradient(0deg, #FFDCA2 0%, #FDC57A 100%);
	}

	.cash-btn {
		border-radius: 200rpx;
		font-size: 24rpx;
		color: #5A3713;
		background: linear-gradient(0deg, #FFDCA2 0%, #FDC57A 100%);
	}
</style>